<template>
	<view class="background">
		<view class="search-dian">
			<view class=" iconfont icon-magnifier"></view>
			<input class="search-input" placeholder="请输入搜索内容" placeholderColor="#B3B3B3" />
			<text class="search-text">搜索</text>
		</view>

		<Lines></Lines>

		<view class="list">

			<!-- 左侧滑动 -->
			<scroll-view scroll-y="true" class="list-left" :style="'height:'+clentHeight+'px;'">
				<view v-for='(item,index) in leftData' :key="index" @tap="changeLeftTab(index,item.id)">
					<view class="left-name " :class='activeIndex ===index ?"left-name-active":"left-item " '>
						{{item.name}}
					</view>
				</view>
			</scroll-view>

			<!-- 右侧滑动 -->
			<scroll-view scroll-y="true" class="list-right" :style="'height:'+clentHeight+'px;'">

				<view class="right-list" v-for='(item,index) in rightData' :key="index">
					<block v-for="(k,i) in item">
						<view class="list-title">{{k.name}}</view>
						<view class="right-content">
							<view class="right-item" v-for="(j,idx) in k.list" :key="idx">
								<image class="right-img" :src="j.bigUrl" mode="" @tap="goDetails"></image>
								<view class="right-name">{{j.name}}</view>
							</view>
						</view>
					</block>

				</view>

			</scroll-view>

		</view>

	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from '@/components/common/Lines.vue'
	export default {
		data() {
			return {
				clentHeight: 0,
				activeIndex: 0,
				// 左侧数据
				leftData: [],
				// 右侧数据
				rightData: []
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - this.getClientHeight();

				}
			})
		},
		onLoad() {
			this.getData();
		},
		components: {
			Lines
		},
		methods: {
			// 请求数据方法
			getData(id) {
				if (id === (this.activeIndex + 1)) {
					return;
				}

				$http.request({
					url: "/goods/list"
				}).then((res) => {
					let leftData = [];
					let rightData = [];
					res.forEach(v => {
						leftData.push({
							id: v.id,
							name: v.name
						})
						// 如果点击的id值相同
						if (v.id === (this.activeIndex + 1)) {
							rightData.push(v.data);
						}
					})
					this.leftData = leftData;
					this.rightData = rightData;
				}).catch(() => {
					uni.showToast({
						title: '请求失败！',
						icon: 'none'
					})
				})
			},
			// 获取可视区域高度【兼容】
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === 'iandroid') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			},
			// 左侧点击事件
			changeLeftTab(index, id) {
				this.getData(id);
				this.activeIndex = index;

			},
			// 详情页面跳转
			goDetails() {
				uni.navigateTo({
					url: '../details/Shoplist'
				})
			}

		},
	}
</script>

<style scoped>
	/* 页面背景 */
	.background {
		background-image: url("https://b-ssl.duitang.com/uploads/item/201406/24/20140624173037_eJd2t.thumb.700_0.jpeg");
		/* 覆盖整个背景区域 */
		background-size: cover;
		/* 背景图片居中显示 */
		background-position: center;
	}

	/* 顶部搜索框部分开始 */
	.search-dian {
		display: flex;
		align-items: center;
		/* 保持图标和输入框垂直居中 */
		padding: 5px;
	}

	.icon-magnifier {
		position: absolute;
		/* 使用绝对定位来放置图标 */
		left: 15px;
		/* 调整图标位置 */
		z-index: 1;
		/* 确保图标在输入框之上 */
	}

	.search-input {
		border-radius: 15px;
		background-color: #F7F7F7;
		flex-grow: 1;
		/* 允许输入框扩展以填充可用空间 */
		margin-right: 10px;
		/* 输入框与搜索按钮之间的间隔 */
		padding-left: 40px;
		/* 为图标腾出空间 */
		position: relative;
		/* 为图标提供定位上下文 */
	}

	.search-text {
		color: #636263;
		font-size: 16px;
	}


	.list {
		display: flex;
	}

	.list-left {
		width: 100px;
	}

	.left-item {
		border-bottom: 1px solid mistyrose;
		font-size: 14px;
		font-weight: bold;
		background-color: papayawhip;
	}

	.left-name {
		padding: 15px 3px;
		text-align: center;
	}

	.left-name-active {
		border-left: 4px solid burlywood;
		background-color: #FFFFFF;
	}

	.list-right {
		flex: 1;
		padding-left: 10px;
	}

	.list-title {
		font-weight: bold;
		padding: 15px 0;
	}

	.right-content {
		display: flex;
		flex-wrap: wrap;
	}

	.right-item {
		width: 75px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 5px;
	}

	.right-img {
		width: 75px;
		height: 75px;
	}

	.right-name {
		padding: 8px 0;
	}
</style>